<template>
  <el-dialog
    @close="cancel"
    :title="title"
    :visible.sync="open"
    width="80%"
    class="dialogClass"
    append-to-body
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="@/assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <div v-for="(item, index) in peopleList" :key="index">
      <el-row>
        <el-col :span="1">
          <div class="indexClass">{{ index + 1 }}</div></el-col
        ><el-col :span="19">
          <el-form
            :ref="'form' + index"
            :model="item"
            :rules="rules"
            size="small"
            label-width="135px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="任务名称" prop="taskName">
                  <el-input
                    :disabled="item.isSave"
                    v-model="item.taskName"
                    placeholder="请输入任务名称"
                    class="taskName"
                  ></el-input> </el-form-item></el-col
              ><el-col :span="8">
                <el-form-item label="所属案件" prop="caseId">
                  <el-select
                    :disabled="item.isSave"
                    v-model="item.caseId"
                    placeholder="请选择所属案件"
                    class="taskName"
                  >
                    <el-option
                      v-for="item in cases"
                      :key="item.id"
                      :label="item.caseName"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item></el-col
              ><el-col :span="8">
                <el-form-item label="案件类型" prop="taskType">
                  <el-select
                    v-model="item.taskType"
                    placeholder="请选择案件类型"
                    :disabled="item.isSave"
                    class="taskName"
                  >
                    <el-option
                      v-for="dict in dict.type.case_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    >
                    </el-option>
                  </el-select> </el-form-item></el-col
            ></el-row>
            <div v-show="item.showFlag">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名" prop="name">
                    <el-input
                      :disabled="item.isSave"
                      v-model="item.name"
                      placeholder="请输入姓名"
                      class="taskName"
                    ></el-input> </el-form-item
                ></el-col>
                <el-col :span="8">
                  <el-form-item label="身份证号" prop="zjh">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.zjh"
                      placeholder="请输入身份证号"
                      class="taskName"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话" prop="tel">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.tel"
                      placeholder="请输入联系电话"
                      class="taskName"
                    >
                    </el-input> </el-form-item
                ></el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="户籍地址" prop="residenceAddress">
                    <el-input
                      :disabled="item.isSave"
                      v-model.trim="item.residenceAddress"
                      placeholder="请输入户籍地址"
                      class="taskName"
                    >
                    </el-input> </el-form-item
                ></el-col>
                <el-col :span="15">
                  <el-form-item
                    label="居住地址"
                    :required="true"
                    :show-message="false"
                  >
                    <el-row :gutter="24" class="oucodeList">
                      <el-col :span="7">
                        <el-form-item
                          label-width="0"
                          label=""
                          prop="oucodeList[0]"
                        >
                          <DictionarySelect
                            :disabled="item.isSave"
                            placeholder="请选择省"
                            source="xzqhbm"
                            v-model="item.oucodeList[0]"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item
                          label-width="0"
                          label=""
                          prop="oucodeList[1]"
                        >
                          <DictionarySelect
                            :disabled="item.isSave"
                            placeholder="请选择市"
                            :source="item.oucodeList[0]"
                            v-model="item.oucodeList[1]"
                          />
                        </el-form-item>
                      </el-col>
                      <el-col :span="8">
                        <el-form-item
                          label-width="0"
                          label=""
                          prop="oucodeList[2]"
                        >
                          <DictionarySelect
                            :disabled="item.isSave"
                            placeholder="请选择区县"
                            :source="item.oucodeList[1]"
                            v-model="item.oucodeList[2]"
                          />
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item label="具体地址" prop="liveAddress">
                <el-input
                  v-model="item.liveAddress"
                  :disabled="item.isSave"
                  placeholder="请输入具体地址"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div class="operation">
            <img
              src="@/assets/images/topArrower.png"
              alt=""
              @click="showAll(item)"
              v-if="item.showFlag == true"
              class="arrow1"
            />
            <img
              src="@/assets/images/topArrower.png"
              alt=""
              @click="showAll(item)"
              v-else
              class="arrow2 is-active"
            />
          </div>
          <div class="border"></div>
        </el-col>
        <el-col :span="4">
          <div class="saveDeleteGroup">
            <el-button @click="save(item, index)" class="searchButton1">{{
              item.buttonContent
            }}</el-button>
            <el-button class="resetButton1" @click="deletePerson(item, index)"
              >删除</el-button
            >
          </div>
        </el-col></el-row
      >
    </div>
    <div slot="footer">
      <div class="dialog-footer">
        <el-button @click="cancel" class="resetButton">取消</el-button>
        <el-button
          class="searchButton"
          @click="submitForm"
          :loading="buttonLoading"
          >确定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
import { ZJH, TEL } from "../../../../utils/variable";
import { getCaseList, batchInsert } from "@/api/checkTask/task";
import DictionarySelect from "@/components/DictionarySelect/DictionarySelect.vue";
export default {
  name: "importModal",
  dicts: ["case_type"],
  inheritAttrs: false,
  components: { DictionarySelect },
  props: {
    personList: {
      type: Array,
    },
  },
  data() {
    return {
      peopleList: [],
      cases: [],
      title: "批量导入",
      buttonLoading: false,
      // 是否显示弹出层
      open: false,
      rules: {
        taskName: [
          {
            required: true,
            message: "请输入任务名称",
            trigger: "blur",
          },
        ],
        caseId: [
          {
            required: true,
            message: "请选择所属案件",
            trigger: "change",
          },
        ],
        taskType: [
          {
            required: true,
            message: "请选择案件类型",
            trigger: "change",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],
        zjh: [
          {
            required: true,
            message: "请输入身份证号",
            trigger: "blur",
          },
          {
            pattern: ZJH,
            message: "身份证号格式错误",
            trigger: "blur",
          },
        ],
        "oucodeList[0]": [
          {
            required: true,
            message: "请选择所属省",
            trigger: "change",
          },
        ],
        "oucodeList[1]": [
          {
            required: true,
            message: "请选择所属市",
            trigger: "change",
          },
        ],
        "oucodeList[2]": [
          {
            required: true,
            message: "请选择所属区县",
            trigger: "change",
          },
        ],
        // residenceAddress: [
        //   {
        //     required: true,
        //     message: "请输入户籍地址",
        //     trigger: "blur",
        //   },
        // ],
        liveAddress: [
          {
            required: true,
            message: "请输入具体地址",
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入联系电话",
            trigger: "blur",
          },
          {
            pattern: TEL,
            message: "手机号格式错误",
            trigger: "blur",
          },
        ],
      },
    };
  },
  inject: ["getList"],
  watch: {
    //监听personList，如果有值，打开模态框
    personList: {
      handler(value) {
        if (value.length !== 0) {
          this.peopleList = value;
          this.open = true;
        }
      },
      immediate: true,
    },
  },
  created() {
    this.getAllCaseList();
  },
  methods: {
    // 获取所属案件
    getAllCaseList() {
      let params = {
        oucode: this.$store.state.user.oucode,
      };
      getCaseList(params).then((response) => {
        this.cases = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    //每个表单保存按钮，是否通过校验，没通过校验无法保存，通过校验保存
    save(item, index) {
      console.log(this.$refs);
      let form = "form" + index;
      this.$refs[form][0].validate((valid) => {
        if (valid) {
          if (item.buttonContent == "保存") {
            item.buttonContent = "编辑";
            item.isSave = true;
            item.showFlag = false;
          } else {
            item.buttonContent = "保存";
            item.isSave = false;
            item.showFlag = true;
          }
        } else {
          return;
        }
      });
    },
    // 表单重置
    reset() {
      for (let i = 0; i < this.peopleList.length; i++) {
        let form = "form" + i;
        this.$refs[form][0].resetFields();
      }
    },
    //通过每一个表单在循环中的index进行删除
    deletePerson(item, index) {
      this.personList.splice(index, 1);
    },
    //展开，隐藏
    showAll(item) {
      item.showFlag = !item.showFlag;
    },

    // 提交按钮
    submitForm() {
      let submitFlag = false;
      this.personList.forEach((el) => {
        if (el.isSave == false) {
          submitFlag = true;
        }
      });
      if (submitFlag == true) {
        this.$message.warning(
          "当前表单存在未保存核查任务信息，请确认后再提交！"
        );
      } else {
        //先利用ES6语法Set将数组去重，之后再原数组比较长度，若长度小于原数组，则说明数组有重复值
        let newListLength = new Set(
          this.personList.map((item) => item.taskName && item.caseId)
        ).size;
        let listLength = this.personList.length;
        if (listLength > newListLength) {
          this.$message.warning("表单中存在重复任务，请确认并重新填写！");
        } else {
          this.buttonLoading = true;
          let params = { taskImportDTOList: this.personList };
          batchInsert(params).then((response) => {
            this.buttonLoading = false;
            this.$emit("update:personList", []);
            this.getList();
            this.$modal.msgSuccess("新增成功");
            this.open = false;
          });
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../../assets/styles/dialog.scss"; //模态框样式

.indexClass {
  margin-top: 17px;
  margin-left: 30px;
  width: 18px;
  height: 18px;
  text-align: center;
  line-height: 18px;
  border: 1px solid #2a92ed;
  border-radius: 4px;
  color: #2a92ed;
  font-size: 14px;
  font-family: DengXian;
  font-weight: 400;
}

::v-deep.el-form-item {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
.operation {
  padding-top: 5px;
  width: 100%;
  display: flex;
}

.saveDeleteGroup {
  display: flex;
  margin-left: 50px;
}

.arrow1 {
  width: 35px;
  height: 30px;
  position: absolute;
  bottom: -8px;
  left: 50%;
  cursor: pointer;
}
.arrow2 {
  width: 35px;
  height: 30px;
  position: absolute;
  bottom: -20px;
  left: 50%;
  cursor: pointer;
}
.is-active {
  transform: rotate(180deg);
}
.border {
  width: 1145px;
  height: 1px;
  margin-top: 3px;
  background-color: #d1d1d1;
}
.searchButton1 {
  margin-top: 15px;
  width: 60px;
  height: 30px;
  background: #598af9;
  border-radius: 4px;
  font-weight: 700;
  margin-right: 10px;
  font-family: Microsoft YaHei;
  letter-spacing: 2px;
  color: #fefbfb;
  border: 0px;
}

.resetButton1 {
  margin-top: 15px;
  border: 1px solid #598af9;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  width: 60px;
  height: 30px;
  background: #fff;
  font-family: Microsoft YaHei;
  color: #598af9;
  letter-spacing: 2px;
}
.saveDeleteGroup {
  display: flex;
  margin-left: 50px;
}
.oucodeList {
  ::v-deep .el-form-item {
    margin: 0 !important;
  }
}
.taskName {
  width: 100%;
}
</style>
